<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增日程任务')" />
    <th:block th:include="include :: datetimepicker-css" />
    <link rel="stylesheet" th:href="@{/css/layui.css}">
    <style>
        .del-tag{
            background-color: #ec1010;
            color: #fff;
            top: 18px;
            width: 12px;
            height: 12px;
            border-radius: 15px;
            cursor: pointer !important;
            padding: 0 4px;
        }
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-sms-add">
  <div class="form-group">
            <label class="col-sm-3 control-label">短信模版</label>
            <div class="col-sm-8">
                <select name="" class="form-control" >
                    <option>会议通知</option>
                </select>
            </div>
        </div>           <div class="form-group">
            <label class="col-sm-3 control-label">短信内容：</label>
            <div class="col-sm-8">
                <!--                    <textarea name="meetContext" class="form-control"></textarea>-->
                【山西亨搏数智】您好，请于<input id="meetDate" class="layui-input"  onblur="reTemp('0',this.value)" placeholder="请输入会议时间" lay-verify="required" required style="width: 30%;display: inline-block;margin: 5px auto;">

<!--                <input id="meetAddr" placeholder="请输入会议地点"  class="layui-input" onblur="reTemp('1',this.value)" lay-verify="required" required style="width: 30%;display: inline-block;margin: 5px auto;">召开-->
<!--                <input id="meetTent" placeholder="请输入会议内容"  class="layui-input" onblur="reTemp('2',this.value)" lay-verify="required" required  style="width: 60%;display: inline-block;margin: 5px auto;">，-->
                在二楼会议室开会，请您准时参加 ！
                <br>
                <textarea name="appointTheme" id="appointTheme" readonly placeholder="请输入会议内容"  class="layui-input" maxlength="500" lay-verify="required" required
                          style="margin: 0px;width: 720px;height: 80px;line-height: 24px;">【山西亨搏数智】您好，请于%s1在二楼会议室开会，请您准时参加 ！
                </textarea>
                <div style="color: #ff0000" >提示：短信内容最多70个汉字，目前还可输入<span id="smsNum" style="font-weight:bold " >34</span>个汉字。<span id="tips"></span></div>
            </div>
        </div>
            <input name="meetContext" id=“meetContext” class="form-control" type="hidden"></input>
            <input name="isSend" class="form-control" type="hidden" value="0">
            <input name="smsContext" id="smsContext" class="form-control" type="hidden">
            <input name="tel" id="tels" class="form-control" type="hidden">

            <div class="form-group">
                <label class="col-sm-3 control-label">参会人：</label>
                <div class="col-sm-8">
                    <button onclick="getUsers()" id="stuBtn" class="layui-btn layui-btn-normal btn-sm ">选择</button>
                    <input name="smsPerson" id="studentsName"  type="hidden" class="layui-input" maxlength="500"  readonly/>
                    <div id="studentsNameDiv"></div>
                </div>
            </div>


            <div class="form-group">    
                <label class="col-sm-3 control-label">是否启用：</label>
                <div class="col-sm-8">
                    <select name="isEnable" class="form-control" >
                        <option value="0">未启用</option>
                        <option value="1" selected>启用</option>
                    </select>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">短信发送时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="sendDate" class="form-control" placeholder="yyyy-MM-dd HH:ss" type="text">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "system/sms"
        $("#form-sms-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-sms-add').serialize());
            }
        }


        $("input[name='sendDate']").datetimepicker({
            dateFormat: 'yyyy-mm-dd',//日期显示格式
            timeFormat:'HH:mm',//时间显示格式
            todayBtn:  1,
            autoclose: 1,
            minView:0,  //0表示可以选择小时、分钟   1只可以选择小时
            minuteStep:1,//分钟间隔1分钟
            autoclose: true
        });

        var meetContext=[];


        function reTemp(s,v){
            var template = "【山西亨搏数智】您好，请于%s0在二楼会议室开会，请您准时参加 ！";
            v=v.replace(/,|，/g,'');
            meetContext[s] = v;
            $("#meetContext").val(meetContext.join(","));
            if(meetContext.length>0){
                meetContext.forEach(function (value,index,array){
                    template = template.replace('%s'+index,value);
                })
                tipsTemp(template);
            }


        }
        function tipsTemp(template){
            var snum=70-template.length;
            $("#smsNum").text(snum<0?0:snum);
            if(snum<0){
                $("#tips").text("您已超过"+((template.length)-70)+"个字,短信将不能发送。");
            }
            $("#smsContext").val(template);
            $("#appointTheme").val(template);
        }

        var nams = [];
        var tels = [];

        function getUsers() {
            //人员选择
            var url = ctx + "system/user";
            layer.open({
                scrollbar: false,
                type: 2,
                title: ["人员选择", true],
                area: ['90%', '95%'], //宽高
                content: url,
                shadeClose: false,
                btn: ['确定'],
                yes: function (index, layero) {
                    var $iframe = layero.find("iframe")[0].contentWindow;
                    var studentIds = $iframe.getSelectedRows();
                    console.log(studentIds);

                    if (studentIds.length > 0) {
                        $.each(studentIds, function (i, v) {
                            var rowName = v.userName;
                            var mobile = v.phonenumber;
                            if(tels.indexOf(mobile)<0){
                                nams.push(rowName);
                                tels.push(mobile);
                            }


                        })
                    }

                    renderData();

                    layer.close(index);
                },
                success: function (layero, index) {
                    layero.find("iframe")[0].contentWindow.$(".grid-btn").remove();
                }
            });
        }

        function renderData(){
            $("#studentsName").val(nams.join()).change();
            $("#tels").val(tels.join());
            if(nams.length>0){
                var str = "";
                nams.forEach(function(v,i){
                    if(str==""){
                        str += nams[i]+'<span class="del-tag"  onclick="delTag('+i+')">x</span>';
                    }else{
                        str +=  ',<span style="margin: 0 7px;"></span>'+nams[i]+'<span class="del-tag" onclick="delTag('+i+')">x</span>';
                    }
                })


                $("#studentsNameDiv").html(str);
            }else{
                $("#studentsNameDiv").html('');
            }

        }

        function delTag(i){
            nams.splice(i,1);
            tels.splice(i,1);
            renderData();
        }
    </script>
</body>
</html>